<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog"
    aria-labelledby="createOrEditModal" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    <span>详情查看</span>
                </h4>
                <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="m-content">
                <div class="ui-g">
                    <div class="ui-g-12">
                        <div class="col-xl-24" style="height:30px;"
                            *ngIf="workstepInfo&&workstepInfo.processesSequence">
                            <div class="col-md-6" class="item-content" style="float: left">
                                工序名称：
                                <span class="m-badge m-badge--success m-badge--wide">
                                    {{processesName}}
                                </span>
                            </div>
                        </div>
                        <div class="col-md-24" class="item-content-step" style="height:300px;">
                            <div class="col-md-6" class="item-content" style="float: left;height:100%;">
                                <p-card header="工步信息" [style]="{width: '500px'}">
                                    <div class="content" style="margin: 10px;"
                                        [innerHTML]="workstepInfo&&workstepInfo.workStepOut&&workstepInfo.workStepOut.workStepName">
                                    </div>
                                </p-card>
                            </div>
                            <div class="col-md-6" class="item-content" style="float: left;height:100%;"
                                *ngIf="workstepInfo&&workstepInfo.workStepOut&&workstepInfo.workStepOut.workStepContent">
                                <p-card header=" " [style]="{width: '500px'}">
                                    <div class="content" style="margin: 10px;"
                                        [innerHTML]="workstepInfo&&workstepInfo.workStepOut&&workstepInfo.workStepOut.workStepContent">
                                    </div>
                                </p-card>

                            </div>

                        </div>
                        <!-- <div style="font-size: 18px;">工序名称：{{processesName}}</div>
            <div class="content" style="margin:10px;height:150px; overflow:auto;" [innerHTML]="processesExplain"></div>
            <div style="font-size: 18px;" *ngIf="workStepContent">工步信息：</div>
            <div class="content" *ngIf="workStepContent" style="margin:10px;height:150px; overflow:auto;" [innerHTML]="workStepContent"></div> -->
                        <div class="main">
                            <p-tabView (onChange)="onTabChange($event)" styleClass="height:350px">
                                <p-tabPanel *ngFor="let tableitem of tagList; let i = index" [selected]="i == 0"
                                    [header]="tableitem.tableName">
                                    <div class="col-xl-12">
                                        <div class="primeng-datatable-container processlabel">
                                            <p-table #dataTable [value]="workStepData" [paginator]="false" dataKey="id"
                                                [scrollable]="true" ScrollWidth="100%">
                                                <ng-template pTemplate="header">
                                                    <tr>
                                                        <th style="width: 120px"
                                                            *ngFor="let headerItem of (workStepHeader&&workStepHeader.filedName?workStepHeader.filedName:[])">
                                                            {{headerItem}}
                                                        </th>
                                                    </tr>
                                                </ng-template>
                                                <ng-template pTemplate="body" let-record="$implicit"
                                                    let-rowIndex="rowIndex">
                                                    <tr>
                                                        <td style="width: 120px"
                                                            *ngFor="let headerprop of (workStepHeader&&workStepHeader.filedDesc?workStepHeader.filedDesc:[])">
                                                            <ng-container [ngSwitch]="headerprop">
                                                                <div *ngSwitchCase="'serialNum'">
                                                                    <span>
                                                                        {{rowIndex+1}}
                                                                    </span>
                                                                </div>
                                                                <div *ngSwitchCase="'photoNo'">
                                                                    <div class="imgList">
                                                                        <!-- <p-lightbox [images]="getImage(record[headerprop])">
                                                                    </p-lightbox> -->
                                                                        <a target="_blank" [href]="item.source"
                                                                            style="padding: 5px;"
                                                                            *ngFor="let item of getImage(record[headerprop])">
                                                                            <img [src]="item.source" height="30px"
                                                                                width="30px">
                                                                        </a>
                                                                        <a target="_blank" [href]="item.source"
                                                                            style="padding: 5px;"
                                                                            *ngFor="let item of getVideo(record[headerprop])">
                                                                            <i class="pi pi-video" style="font-size: 2em;color:#5599FF;"></i>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                                <div *ngSwitchCase="'secondPhotoNo'">
                                                                    <div class="imgList">
                                                                        <!-- <p-lightbox [images]="getImage(record[headerprop])">
                                                                    </p-lightbox> -->
                                                                        <a target="_blank" [href]="item.source"
                                                                            style="padding: 5px;"
                                                                            *ngFor="let item of getImage(record[headerprop])">
                                                                            <img [src]="item.source" height="30px"
                                                                                width="30px">
                                                                        </a>
                                                                        <a target="_blank" [href]="item.source"
                                                                            style="padding: 5px;"
                                                                            *ngFor="let item of getVideo(record[headerprop])">
                                                                            <i class="pi pi-video" style="font-size: 2em;color:#5599FF;"></i>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                                <div *ngSwitchCase="'thirdPhotoNo'">
                                                                    <div class="imgList">
                                                                        <!-- <p-lightbox [images]="getImage(record[headerprop])">
                                                                    </p-lightbox> -->
                                                                        <a target="_blank" [href]="item.source"
                                                                            style="padding: 5px;"
                                                                            *ngFor="let item of getImage(record[headerprop])">
                                                                            <img [src]="item.source" height="30px"
                                                                                width="30px">
                                                                        </a>
                                                                        <a target="_blank" [href]="item.source"
                                                                            style="padding: 5px;"
                                                                            *ngFor="let item of getVideo(record[headerprop])">
                                                                            <i class="pi pi-video" style="font-size: 2em;color:#5599FF;"></i>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                                <div *ngSwitchCase="'fourthPhotoNo'">
                                                                    <div class="imgList">
                                                                        <!-- <p-lightbox [images]="getImage(record[headerprop])">
                                                                    </p-lightbox> -->
                                                                        <a target="_blank" [href]="item.source"
                                                                            style="padding: 5px;"
                                                                            *ngFor="let item of getImage(record[headerprop])">
                                                                            <img [src]="item.source" height="30px"
                                                                                width="30px">
                                                                        </a>
                                                                        <a target="_blank" [href]="item.source"
                                                                            style="padding: 5px;"
                                                                            *ngFor="let item of getVideo(record[headerprop])">
                                                                            <i class="pi pi-video" style="font-size: 2em;color:#5599FF;"></i>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                                <!-- 操作人 1-5检 -->
                                                                <div *ngSwitchCase="'route'">
                                                                    <span style="color: blue;cursor:pointer"
                                                                        (click)="showUrlInfo(record)">
                                                                        {{record[headerprop]}}
                                                                    </span>
                                                                </div>
                                                                <div *ngSwitchCase="'firstOperator'">
                                                                    <div style="padding: 5px;"
                                                                        *ngFor="let item of getUser(record[headerprop])">
                                                                        <a target="_blank" [href]="item.url"
                                                                            style="color: blue;cursor:pointer">{{item.name}}</a>
                                                                        <span
                                                                            style="margin-left: 5px;">{{item.time}}</span>
                                                                    </div>
                                                                </div>
                                                                <div *ngSwitchCase="'secondOperator'">
                                                                    <div style="padding: 5px;"
                                                                        *ngFor="let item of getUser(record[headerprop])">
                                                                        <a target="_blank" [href]="item.url"
                                                                            style="color: blue;cursor:pointer">{{item.name}}</a>
                                                                        <span
                                                                            style="margin-left: 5px;">{{item.time}}</span>
                                                                    </div>
                                                                </div>
                                                                <div *ngSwitchCase="'thirdOperator'">
                                                                    <div style="padding: 5px;"
                                                                        *ngFor="let item of getUser(record[headerprop])">
                                                                        <a target="_blank" [href]="item.url"
                                                                            style="color: blue;cursor:pointer">{{item.name}}</a>
                                                                        <span
                                                                            style="margin-left: 5px;">{{item.time}}</span>
                                                                    </div>
                                                                </div>
                                                                <div *ngSwitchCase="'fourthOperator'">
                                                                    <div style="padding: 5px;"
                                                                        *ngFor="let item of getUser(record[headerprop])">
                                                                        <a target="_blank" [href]="item.url"
                                                                            style="color: blue;cursor:pointer">{{item.name}}</a>
                                                                        <span
                                                                            style="margin-left: 5px;">{{item.time}}</span>
                                                                    </div>
                                                                </div>
                                                                <div *ngSwitchCase="'fifthOperator'">
                                                                    <div style="padding: 5px;"
                                                                        *ngFor="let item of getUser(record[headerprop])">
                                                                        <a target="_blank" [href]="item.url"
                                                                            style="color: blue;cursor:pointer">{{item.name}}</a>
                                                                        <span
                                                                            style="margin-left: 5px;">{{item.time}}</span>
                                                                    </div>
                                                                </div>
                                                                <div *ngSwitchDefault>
                                                                    {{record[headerprop]}}
                                                                </div>
                                                            </ng-container>
                                                        </td>
                                                    </tr>
                                                </ng-template>
                                            </p-table>
                                        </div>
                                    </div>
                                </p-tabPanel>
                            </p-tabView>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>